<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
tr :hover {
	cursor:defamult;
}
.trids td{
	text-align: center;
}
.singnintdwqd span{
	color: #CC3333;
}

.singnintdqq span{
	color: #FFAC40;
}
.singnintdqqi span{
	color: #01b2f1;
}
.singnintdwqd:hover,.singnintdqq:hover,.singnintdqqi:hover{
	background: #f3f3f3;
	box-shadow: 0 18px 36px #c8ecf8;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	cursor:pointer;
}
</style>

</head>
<body>
<form class="layui-form white-bg" style="padding:10px" action="" lay-filter="example">
				<fieldset class="layui-elem-field layui-field-title site-title">
					<legend><a name="fixbar">考勤签到</a></legend>
				</fieldset>
				<div style="text-align:center;width:100%">
					<div class="layui-form">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label" style="width:100px">请选择时间：</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input" id="yearM" onchange="datepost(this.value)" placeholder="yyyy-MM"  style="width:200px">
								</div>
							</div>
						</div>
					</div>
				</div>
				<table class="layui-table" style="background: #f2f2f2;">
					<thead>
					<tr>
						<th style="text-align: center;">周一</th>
						<th style="text-align: center;">周二</th>
						<th style="text-align: center;">周三</th>
						<th style="text-align: center;">周四</th>
						<th style="text-align: center;">周五</th>
						<th style="text-align: center;">周六</th>
						<th style="text-align: center;">周日</th>
					</tr>
					</thead>
					<tbody id="kc_body">
						
					</tbody>
				</table>
			</form>
	<script type="text/javascript">
	function datepost(value){
		if(value = null){
			value ="";
		}
		$.post('calendar/tolists',{value:value},function(data){
			html = "";
			for(var i=0;i<data.length;i++){
				var xq = data[i].xq;
				if(i==0 || xq == 1){
	                html += "<tr  height='120px;' class='trids'>";
	            }
				if(i==0&&xq!=1){
					for(var j=1;j<xq;j++){
			            html += '<td  style="text-align: center;"></td>';
					}
				}
				var canshu = "";
				if(data[i].isqd==0){
					canshu ='<span><i class="fa fa-eye"></i>未签到</span>' ;
					html += '<td onclick="kaoqing(&#34;'+data[i].data+'&#34;)" class="singnintdwqd">'+data[i].datar+'<hr>'+canshu+'</td>';
				}else if(data[i].isqd==1){
					canshu = '<span><i class="fa fa-eye"></i>缺勤</span>';
					html += '<td onclick="kaoqing(&#34;'+data[i].data+'&#34;)" class="singnintdqq">'+data[i].datar+'<hr>'+canshu+'</td>';
				}else if(data[i].isqd==2){
					canshu ='<span><i class="fa fa-eye">全勤</span>';
					html += '<td onclick="kaoqing(&#34;'+data[i].data+'&#34;)" class="singnintdqqi">'+data[i].datar+'<hr>'+canshu+'</td>';
				}else if(data[i].isqd==3){
					canshu = "<span style='color: #92e657'>没有课程</span>";
					html += '<td>'+data[i].datar+'<hr>'+canshu+'</td>';
				}else if(data[i].isqd==4){
					canshu = '<span style="">未到签到时间</span>';
					html += '<td>'+data[i].datar+'<hr>'+canshu+'</td>';
				}
				
	            if(xq == 7 || i==data.length-1){
	                html += "</tr>";
	            }
			}
			$("#kc_body").html(html);
		});		
	}
	function kaoqing(value){
		
		$.post("calendar/signin", {data: value}, function(data){
		layer.open({
			title: value+" 日课程签到情况",
			type: 1,
			shade: 0.3,
			shadeClose:true,
			maxmin: true,
			content: data,
			area: '50%',
			btn: ['关闭'],
			yes:function(){
				layer.closeAll();
			},
			})
		});
	}
			
	</script>
	
			<script>
				layui.use('laydate', function(){
					 var laydate = layui.laydate;
					laydate.render({
					    elem: '#yearM'
					    ,type: 'month'
					    ,value:new Date()
						,done: function(value, date){
							console.info(value);
							$.post('calendar/tolists',{date:value},function(data){
								
								html = "";
								for(var i=0;i<data.length;i++){
									var xq = data[i].xq;
									if(i==0 || xq == 1){
						                html += "<tr height='120px;' class='trids'>";
						            }
									if(i==0&&xq!=1){
										for(var j=1;j<xq;j++){
								            html += '<td  style="text-align: center;"></td>';
										}
									}
									var canshu = "";
									if(data[i].isqd==0){
										canshu ='<span><i class="fa fa-eye"></i>未签到</span>' ;
										html += '<td onclick="kaoqing(&#34;'+data[i].data+'&#34;)" class="singnintdwqd">'+data[i].datar+'<hr>'+canshu+'</td>';
									}else if(data[i].isqd==1){
										canshu = '<span><i class="fa fa-eye"></i>缺勤</span>';
										html += '<td onclick="kaoqing(&#34;'+data[i].data+'&#34;)" class="singnintdqq">'+data[i].datar+'<hr>'+canshu+'</td>';
									}else if(data[i].isqd==2){
										canshu ='<span><i class="fa fa-eye">全勤</span>';
										html += '<td onclick="kaoqing(&#34;'+data[i].data+'&#34;)" class="singnintdqqi">'+data[i].datar+'<hr>'+canshu+'</td>';
									}else if(data[i].isqd==3){
										canshu = "<span style='color: #92e657'>没有课程</span>";
										html += '<td>'+data[i].datar+'<hr>'+canshu+'</td>';
									}else if(data[i].isqd==4){
										canshu = '<span style="">未到签到时间</span>';
										html += '<td>'+data[i].datar+'<hr>'+canshu+'</td>';
									}
						            if(xq == 7 || i==data.length-1){
						                html += "</tr>";
						            }
								}
								console.info(html);
								$("#kc_body").html("");
								$("#kc_body").html(html);
							});		
					      }
					  });
					  
				});
				datepost();
			</script>
</body>
</html>